<template>
  <view class="box1">
    <view class="box_title"> 星云共创 </view>
    <view
      class="box_item"
      v-for="(item, index) in list"
      :key="index"
      @click="toDetail(item)"
    >
      <view class="item_left">
        <image :src="item.img_url" mode=""></image>
      </view>
      <view class="item_right">
        <view class="right_title"> {{ item.name }} </view>
        <view class="right_author"> {{ item.author }} </view>
        <view class="right_text" v-html="item.introduce">
          <!-- {{ item.introduce }} -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      itemList: [{}, {}],
    };
  },
  methods: {
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/home/coCreateList?pid=${item.id}&title=${item.name}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.box1 {
  width: 100%;
  background: rgba(39, 39, 39, 0.5);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin-top: 32rpx;
  padding: 0 30rpx 15rpx 30rpx;
  box-sizing: border-box;
  .box_title {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    color: #eee;
    padding: 32rpx 0;
    box-sizing: border-box;
  }
  .box_item {
    width: 100%;
    display: flex;
    margin-bottom: 32rpx;
    .item_left {
      width: 160rpx;
      height: 214rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .item_right {
      flex: 1;
      padding-left: 24rpx;
      box-sizing: border-box;
      position: relative;
      .right_title {
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #eeeeee;
      }
      .right_author {
        font-size: 26rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #adadad;
        margin-top: 10rpx;
      }
      .right_text {
        font-size: 26rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #eeeeee;
        position: absolute;
        bottom: 0;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>
